import React, { Component } from 'react'
import Footer from './components/Footer'
import Header from './components/Header'
import Main from './components/Main'
import './css/index.css'
class App extends Component {
  state = {
    content: [
      {
        id: Math.random(),
        label: 'Taste JavaScript',
        check: false,
      },
    ],
  }
  addContent = (value) => {
    this.setState({
      content: [
        ...this.state.content,
        {
          id: Math.random(),
          label: value,
          check: false,
        },
      ],
    })
  }
  changeCheck = (id) => {
    this.state.content.map((item) => {
      if (item.id === id) {
        this.setState({})
      } else {
        return item
      }
    })
  }

  delItem = (id) => {
    console.log(id)
    const newContent = [...this.state.content].filter((item) => item.id !== id)
    this.setState({
      content: newContent,
    })
  }
  render() {
    return (
      <section className="todoapp">
        <Header content={this.state.content} addContent={this.addContent} />
        <Main
          content={this.state.content}
          delItem={this.delItem}
          changeCheck={this.changeCheck}
        />
        <Footer />
      </section>
    )
  }
}

export default App
